<template>
  <div id="map-title">
    <span
      :class="[!isOftenShow && map_level!=='01'&& map_level!=='05'&& map_level!=='07'?'highlight':'gray']">显示模式 : </span>
    <ul>
      <li v-for="item in viewType" @click="setViewType(item)"
          :class="[cur_type === item.type&& map_level!=='07'?'active':'']">
        <span class="radio-bg"><span
          :class="[cur_type === item.type&& map_level!=='07'?'radio-active':'']"></span></span>
        <span class="type">{{item.name}}</span>
      </li>
    </ul>

    <span :class="['tog-box',cur_state === 'history' && date_type === 'all'?'disabledClass':'normalClass']"
          @click="setOftenShow()" :title="jamTip">
      <span :class="[isOftenShow?'light':'gray','tog-tip']"></span>
    </span>
    <span :class="[isOftenShow?'highlight':'opcity']">{{jamTipName}}</span>
    <span class="btn reset-city" @click="centerToCurCity()">重置当前城市</span>
    <span :class="[map_level === '01'?'active':'','btn','reset-view']" @click="globalMapView">全国视图</span>

    <span class="right-tip" @click="updatePopup(true)">算法说明</span>
    <div class="popBox" v-if="isPopShow">
      <span class="close-btn" @click="updatePopup(false)"></span>
      <AlgorithmDesc/>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import eventBus from '../util/event-bus'
  import AlgorithmDesc from './views/ctrl/AlgorithmDesc.vue'
  export default {
    name: 'MapTitle',
    data () {
      return {
        viewType: [
          {
            id: '06',
            type: 'aotu',
            name: '自动切换'
          },
          {
            id: '02',
            type: 'district',
            name: '行政区划'
          },
          {
            id: '03',
            type: 'netbox',
            name: '网格级'
          },
          {
            id: '04',
            type: 'road',
            name: '道路级'
          }
        ],
        cur_type: '',
        isOftenShow: false,   //是否显示常发拥堵路段
        jamTipName: '显示偶发拥堵路段',
        isPopShow: false,   //算法说明弹框显示
        jamTip: ''
      }
    },
    mounted(){

    },
    components: {
      AlgorithmDesc
    },
    computed: {
      ...mapGetters(['map_level', 'cur_state', 'cur_city', 'date_type']),
    },
    methods: {
      ...mapMutations(['updateMapLevel']),
      globalMapView(){
        this.updateMapLevel('01');
      },
      setViewType(item){
        this.cur_type = item.type;
        this.updateMapLevel(item.id);
      },
      setOftenShow(){
        if (this.cur_state === 'history' && this.date_type === 'all') {
          this.isOftenShow = false;
        } else {
          this.isOftenShow = !this.isOftenShow;
          if (this.isOftenShow) {
            this.updateMapLevel('05');
            eventBus.$emit("closeOftenShow", true);
          } else {
            eventBus.$emit("closeOftenShow", false);
          }
        }
      },
      centerToCurCity(){
        if (this.map_level === '01') {
          return;
        } else {
          eventBus.$emit('centerToCurCity');
        }
      },
      updatePopup(bool){
        eventBus.$emit("updatePopup", bool);
        this.isPopShow = bool;
      }
    },
    watch: {
      isOftenShow(curVal, oldVal){
        if (curVal && curVal != oldVal) {
          this.cur_type = '';
        }
      },
      cur_type(curVal, oldVal){
        if (curVal && curVal != oldVal) {
          this.isOftenShow = false;
        }
      },
      cur_state(curVal, oldVal){
        if (curVal != oldVal) {
          this.jamTipName = curVal === 'real' ? '显示偶发拥堵路段' : '显示常发拥堵路段';
          this.jamTip = curVal === 'history' && this.date_type === 'all' ? '常发拥堵只区分工作日、非工作日' : '';
          eventBus.$emit("closeOftenShow", this.isOftenShow);
        }
      },
      date_type(curVal, oldVal){
        if (curVal != oldVal) {
          this.jamTip = curVal === 'all' && this.cur_state === 'history' ? '常发拥堵只区分工作日、非工作日' : '';
        }
      },
      map_level(curVal, oldVal){
        if (curVal != oldVal) {
          this.viewType.map((item) => {
            if (curVal === item.id) {
              this.cur_type = item.type;
            }
          })
          if (curVal === '01') {
            this.cur_type = '';
          }
          if (curVal !== '05') {
            this.isOftenShow = false;
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../common/common.scss";

  #map-title {
    height: $title-height;
    line-height: $title-height;
    background-color: $bg-normal;
    span {
      vertical-align: middle;
      &.disabledClass {
        cursor: not-allowed;
      }
    }
    .highlight {
      color: $font-highlight;
      opacity: 1;
    }
    .gray {
      opacity: 0.6;
    }
    .opcity {
      opacity: 0.6;
    }
    .btn {
      width: 78px;
      height: 16px;
      border-radius: 9px;
      color: #333;
      opacity: 0.6;
      border: solid 0.5px #ffffff;
      font-size: 10px;
      line-height: 16px;
      padding: 0 8px;
      cursor: pointer;
      position: relative;
      top: 0px;
      margin-left: 10px;
      &:hover {
        opacity: 0.9;
      }
      &.reset-city {
        padding-left: 16px;
        background: rgba(255, 255, 255, 0.8) url("../../static/images/reset-icon.png") no-repeat left center;
      }
      &.reset-view {
        padding-left: 16px;
        background: rgba(255, 255, 255, 0.8) url("../../static/images/global-icon.png") no-repeat left center;
        &.active {
          background-color: #fff;
          opacity: 0.9;
        }
      }
    }
    .right-tip {
      float: right;
      margin-right: 20px;
      opacity: 0.6;
      cursor: pointer;
    }
    ul {
      display: inline-block;
      li {
        display: inline-block;
        vertical-align: middle;
        list-style: none;
        cursor: pointer;
        span {
          display: inline-block;
          vertical-align: middle;
        }
        .type {
          margin-right: 10px;
          opacity: 0.7;
        }
        &.active {
          .type {
            opacity: 1;
          }
        }
        .radio-bg {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.3);
          margin-right: 2px;
          cursor: pointer;
          opacity: 1;
          .radio-active {
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin: 3px;
            opacity: 1;
          }
        }
      }
    }
    .tog-box {
      display: inline-block;
      width: 24px;
      height: 16px;
      border-radius: 14px;
      margin: 0 2px 0 20px;
      background-color: rgba(255, 255, 255, 0.2);
      position: relative;
      cursor: pointer;
      .tog-tip {
        position: absolute;
        width: 8px;
        height: 8px;
        top: 4px;
        border-radius: 50%;
        background-color: $font-highlight;
        &.light {
          left: 12px;
        }
        &.gray {
          left: 3px;
          background-color: gray;
        }
      }
    }

    .popBox {
      position: absolute;
      /*top: 100px;*/
      top: calc(50% - 350px);
      left: calc(50% - 500px);
      /*width: 800px;*/
      /*height: 600px;*/
      z-index: 1000;
      border: 2px solid #6d7c88;
      border-radius: 3px;
      background-color: #35495a;
      .close-btn {
        position: absolute;
        top: 2px;
        right: 5px;
        z-index: 1000;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background: url("../../static/images/confirm/error-f.png") no-repeat center;
        &:hover {
          background-image: url("../../static/images/confirm/error-icon.png");
        }
      }
    }
  }
</style>
